<template>
  <div class="box">
    <div class="top">
      <p class="title">年龄比例</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="LeftBottom">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  let option = {
    title: {
      text: '今日总数',
      top: '43%',
      left: '40%',
      textStyle: {
        color: 'white',
      },
    },
    legend: {
      left: '20',
      top: 20,
      orient: 'vertical',
      textStyle: {
        color: 'white',
        width: 20,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}:{c}<br />{d}%',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },

    series: [
      {
        name: 'Chart',
        type: 'pie',
        center: ['50%', '50%'],
        roseType: false,
        radius: ['100%', '50%'],
        itemStyle: {
          borderRadius: 6,
          borderColor: 'white',
        },
        label: { show: false },
        data: [
          { value: 40, name: '18-24' },
          { value: 38, name: '24-32' },
          { value: 32, name: '32-42' },
          { value: 30, name: '42-62' },
          { value: 28, name: '62+' },
        ],
      },
    ],
    grid: {
      top: 30,
      left: 0,
      bottom: 30,
      right: 0,
    },
  }
  mycharts.setOption(option)
})
</script>
<style scoped lang="scss">
.box {
  padding: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    flex: 2;
    .title {
      color: white;
      font-size: 20px;
      font-weight: bold;
    }
    .bg {
      height: 10px;
      margin-top: 5px;
      background: url('../../images/dataScreen-title.png') no-repeat left;
      background-size: left;
    }
  }
  .charts {
    flex: 8;
    margin-top: 10px;
  }
}
</style>
